<template>
  <div 
    class="charging-card" 
    :class="{ 
      'not-started': chargeStatus === 0, 
      'charging': chargeStatus === 1, 
      'finished': chargeStatus === 2, 
      'abnormal': chargeStatus === 255
    }"
  >
    <!-- 头部保持不变 -->
    <div class="card-header">
      <span class="vin">VIN: {{ vin }}</span>
      <div class="status-wrapper">
        <span class="status-circle" :style="{ background: statusColor }"></span>
        <span class="status-text" :style="{ color: statusColor }">{{ statusText }}</span>
      </div>
      <span class="id">ID: {{ connectorId }}</span>
    </div>
    
    <div class="card-body">
      <!-- 未开启状态保持不变 -->
      <template v-if="chargeStatus === 0">
        <div class="info-row">
          <span>调度时间：{{ scheduleTime }}</span>
        </div>
        <div class="info-row">
          <span>目标电量：{{ targetSoc }}%</span>
        </div>
        <van-button 
          class="start-charge-btn"
          type="primary"
          size="small"
          @click="handleStartCharging"
          :loading="isLoading"
        >
          即刻充电
        </van-button>
      </template>

      <!-- 充电中状态保持不变 -->
      <template v-else-if="chargeStatus === 1">
        <div class="info-row">
          <span>开始时间：{{ formatTime(startTime) }}</span>
          <span>实时状态：{{ realTimeStatus || '--' }}</span>
        </div>
        
        <div class="info-row">
          <span>充电时长：{{ chargingDuration }}</span>
          <span>已充电度数：{{ chargeAmount || '0' }}度</span>
        </div>
        
        <div class="soc-status">
          <span>SOC状态:</span>
          <div class="soc-bar">
            <div class="soc-progress" :style="{ width: currentSoc + '%', background: statusColor }"></div>
            <!-- 当前电量三角和数值（绿色） -->
            <div 
              class="charging-triangle"
              :style="{ left: currentSoc + '%' }"
            ></div>
            <div 
              class="charging-value"
              :style="{ left: currentSoc + '%' }"
            >
              {{ currentSoc }}%
            </div>
            <!-- 目标电量三角和数值（蓝色） -->
            <div 
              class="target-triangle"
              :style="{ left: targetSoc + '%' }"
            ></div>
            <div 
              class="target-value"
              :style="{ left: targetSoc + '%' }"
            >
              {{ targetSoc }}%
            </div>
          </div>
        </div>
      </template>

      <!-- 已停止状态（只显示当前电量，绿色） -->
      <template v-else-if="chargeStatus === 2">
        <div class="info-row">
          <span>开始时间：{{ formatTime(startTime) }}</span>
          <span>结束时间：{{ formatTime(endTime) }}</span>
        </div>
        
        <div class="info-row">
          <span>充电时长：{{ chargingDuration }}</span>
          <span>充电度数：{{ chargeAmount || '0' }}度</span>
        </div>
        
        <div class="soc-status">
          <span>SOC状态:</span>
          <div class="soc-bar">
            <div class="soc-progress" :style="{ width: currentSoc + '%', background: '#07C160' }"></div>
            <!-- 已停止状态图标（绿色） -->
            <div 
              class="stopped-icon"
              :style="{ left: currentSoc + '%' }"
            ></div>
            <div 
              class="stopped-value"
              :style="{ left: currentSoc + '%' }"
            >
              {{ currentSoc }}%
            </div>
          </div>
          <span>当前电量：{{ currentSoc }}%</span>
        </div>
      </template>

      <!-- 异常终止状态（只显示当前电量，红色） -->
      <template v-else-if="chargeStatus === 255">
        <div class="info-row">
          <span>开始时间：{{ formatTime(startTime) }}</span>
          <span>结束时间：{{ formatTime(endTime) }}</span>
        </div>
        
        <div class="info-row">
          <span>充电时长：{{ chargingDuration }}</span>
          <span>充电度数：{{ chargeAmount || '0' }}度</span>
        </div>
        
        <div class="abnormal-info">
          <span>故障原因：{{ stopReason }}</span>
        </div>
        
        <div class="soc-status">
          <span>SOC状态:</span>
          <div class="soc-bar">
            <div class="soc-progress" :style="{ width: currentSoc + '%', background: '#ff0000' }"></div>
            <!-- 异常终止状态图标（红色） -->
            <div 
              class="abnormal-stopped-icon"
              :style="{ left: currentSoc + '%' }"
            ></div>
            <div 
              class="abnormal-stopped-value"
              :style="{ left: currentSoc + '%' }"
            >
              {{ currentSoc }}%
            </div>
          </div>
          <span>当前电量：{{ currentSoc }}%</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
// 脚本部分保持不变
import { computed, ref } from 'vue';
import { Button } from 'vant';

const props = defineProps({
  vin: { type: String, required: true },
  chargeStatus: { 
    type: Number, 
    required: true,
    validator: (val) => [0, 1, 2, 255].includes(val) 
  },
  connectorId: { type: String, required: true },
  startTime: { type: String, default: '' },
  scheduleTime: { type: String, default: '' },
  chargingDuration: { type: String, default: '未开始' },
  chargeAmount: { type: [String, Number], default: 0 },
  currentSoc: { type: Number, default: 0 },
  targetSoc: { type: Number, default: 100 },
  realTimeStatus: { type: String, default: '' },
  endTime: { type: String, default: '' },
  stopReason: { type: String, default: '' }
});

const emit = defineEmits(['instant-charge']);
const isLoading = ref(false);

// 状态文本转换
const statusText = computed(() => {
  switch(props.chargeStatus) {
    case 0: return '未开启';
    case 1: return '充电中';
    case 2: return '已结束';
    case 255: return '故障';
    default: return '未知状态';
  }
});

// 状态颜色计算
const statusColor = computed(() => {
  switch(props.chargeStatus) {
    case 0: return '#999';      // 未开启 - 灰色
    case 1: return '#07C160';  // 充电中 - 绿色
    case 2: return '#1989fa';  // 已结束 - 蓝色
    case 255: return '#ff0000'; // 故障 - 红色
    default: return '#999';
  }
});

// 格式化时间显示
const formatTime = (timeString) => {
  if (!timeString) return '';
  try {
    const date = new Date(timeString);
    return date.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit',
      hour12: false
    });
  } catch {
    return timeString;
  }
};

const handleStartCharging = async () => {
  if (props.chargeStatus !== 0) return;
  
  isLoading.value = true;
  try {
    emit('instant-charge');
  } finally {
    isLoading.value = false;
  }
};
</script>

<style scoped>
/* 基础样式保持不变 */
.charging-card {
  position: relative;
  padding: 12px;
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 12px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.status-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-text {
  font-size: 12px;
  white-space: nowrap;
  font-weight: 500;
}

.vin, .id {
  font-size: 12px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
  line-height: 1.4;
  font-size: 12px;
}

.abnormal-info {
  color: #ff0000;
  margin: 4px 0;
  font-size: 12px;
}

.soc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 12px;
}

.soc-bar {
  position: relative;
  flex: 1;
  height: 4px;
  background: #eee;
  border-radius: 2px;
}

.soc-progress {
  height: 100%;
  transition: width 0.3s ease;
}

.start-charge-btn {
  margin-top: 12px;
  width: 100%;
}

/* 充电中状态 - 当前电量（绿色） */
.charging-triangle {
  position: absolute;
  top: -18px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #07C160;
  transform: translateX(-50%);
}

.charging-value {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  color: #07C160;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 3px;
  border-radius: 2px;
}

/* 充电中状态 - 目标电量（蓝色） */
.target-triangle {
  position: absolute;
  top: -18px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #1989fa;
  transform: translateX(-50%);
}

.target-value {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  color: #1989fa;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 3px;
  border-radius: 2px;
}

/* 已停止状态（绿色） */
.stopped-icon {
  position: absolute;
  top: -16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #07C160;
  transform: translateX(-50%);
}

.stopped-value {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  color: #07C160;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 3px;
  border-radius: 2px;
}

/* 异常终止状态（红色） */
.abnormal-stopped-icon {
  position: absolute;
  top: -16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ff0000;
  transform: translateX(-50%);
}

.abnormal-stopped-value {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  white-space: nowrap;
  color: #ff0000;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0 3px;
  border-radius: 2px;
}

@media (max-width: 320px) {
  .charging-card,
  .status-text,
  .info-row,
  .abnormal-info,
  .soc-status {
    font-size: 10px;
  }
  
  .charging-value,
  .target-value,
  .stopped-value,
  .abnormal-stopped-value {
    font-size: 9px;
    top: -30px;
  }
}
</style>